<template>
  <div class="bgbg" v-if="videoshow">
    <div class="video">
      <div class="closediv" @click="closeshow"></div>
      <div class="title">摄像头-{{ data.name }}</div>
      <div class="videoplayer">
        <video-player
          style="width: 100%; height: 100%"
          :src="videoSrc"
          :options="data.playerOptions"
          :volume="0.6"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, defineProps } from "vue";
import CryptoJS from "crypto-js";
const props = defineProps({
  bottomdata: Object,
});
const videoSrc = ref("");
import {
  getvideo,
  getvideolist,
  getshexiangtouId,
  getshexiangtoudata,
} from "../../api/index";
let data = reactive({
  playerOptions: {
    // height: 200,
    // width: 400, //播放器宽度
    playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
    autoplay: "any", // 如果true,浏览器准备好时开始回放。
    muted: true, // 默认情况下将会消除任何音频。
    loop: true, // 导致视频一结束就重新开始。
    preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
    language: "zh-CN",
    aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
    notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
    controls: true,
    controlBar: {
      timeDivider: true,
      durationDisplay: true,
      remainingTimeDisplay: false,
      fullscreenToggle: true, // 全屏按钮
    },
  },
  id: null,
  name: "大坝",
});
let videoshow = ref(false);
const closeshow = () => {
  videoshow.value = false;
  // console.log(props.bottomdata);
  props.bottomdata[1].selectlist.forEach((item, index) => {
    window.ue4("DevicesManage", {
      name: item.text,
      status: item.show == true ? 1 : 0,
    });
  });
};
ue.interface.Isshowvideo = function (id, name) {
  videoshow.value = true;
  data.id = id;
  data.name = name;
  init(data.id);
};
function init(id) {
  getshexiangtoudata({}).then((res) => {
    let item = res.data.find((item) => item.id == id);
    // 引入CryptoJS的AES和enc模块
    // const CryptoJS = require("crypto-js");
    // 后端提供的密钥和加密信息
    if (item != undefined) {
      const KEY = "_____sisowi_____";
      const encryptedData = item.hdUrl;
      // 示例数据，请替换为实际接收的数据
      // CryptoJS要求密钥为WordArray格式，因此需要转换
      const keyWordArray = CryptoJS.enc.Utf8.parse(KEY);
      // 解密
      const decryptedData = CryptoJS.AES.decrypt(encryptedData, keyWordArray, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7,
      }); // 注意：CryptoJS使用Pkcs7Padding而非PKCS5Padding，但它们在128位块加密中等效
      // 将解密后的WordArray转换为UTF8字符串
      const plainText = CryptoJS.enc.Utf8.stringify(decryptedData);
      // console.log("解密后的数据:", plainText);
      videoSrc.value = plainText;
    }
    // console.log(item.hdUrl, hdUrl, "55555");
  });
  // getshexiangtouId({ id: "1" }).then((res) => {
  //   console.log(res);
  //   videoSrc.value = res.data.hdUrl;
  //   // console.log(res.data.hdUrl);
  // });
}
// init();
</script>

<style lang="scss" scoped>
.bgbg {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0px;
  left: 0px;
  // overflow: hidden;
  z-index: 999;
}
.video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 514.57px;
  height: 332.17px;
  transform: translate(-50%, -50%);
  background: url("@/assets/image/sxtback.png") 0px no-repeat;
  background-size: cover;
  padding-left: 17px;
  box-sizing: border-box;
  z-index: 9999;
  .closediv {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 15px;
    height: 15px;
    // border: 1px solid red;
    cursor: pointer;
  }
  .title {
    font-family: "Source Han Sans CN";
    font-weight: bold;
    font-size: 14px;
    color: #ffffff;
    // line-height: 25px;
    // text-align: left;
    font-style: normal;
    text-transform: none;
  }
  .videoplayer {
    position: absolute;
    top: 30px;
    left: 0px;
    width: 100%;
    height: 302px;
    // border: 1px solid red;
  }
}
.bgbg::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.5); /* 遮罩层颜色和透明度 */
}
// v-deep {
//   .video .video-js .vjs-big-play-button {
//     position: absolute !important;
//     top: 50% !important;
//     left: 50% !important;
//   }
// }
</style>